<template>
	<div class="ChargingPile">
		<x-header title="充电桩" :left-options="{backText:''}" class='whiteHeader'>
		</x-header>
		<div class="imgs" @click="getPosition">
			<img src="../../assets/image/home/ChargingPile.png" alt="" />
			<!--<p>定位</p>-->
		</div>
		<div id="container"></div>
		<div v-show="isShow" class="parkingInfo">
			<div class="parkingInfo1">
				<p>{{parkingName}}</p>	
			</div>
			<div class="parkingInfo2">
				<img src="../../assets/image/home/position.png" alt="" /><span>{{parkingAddr}}</span>	
			</div>
			<div class="parkingInfo3">
				<p><span>{{distance}}</span>km</p>	
			</div>						
		</div>
	</div>
</template>
<script>
	/*充电桩*/
	import { XHeader } from 'vux';
	import { setCookie, getCookie } from '../../util/commonUtils';
	import yourLocation from '../../assets/image/home/map_car.png';	
	import parking from '../../assets/image/home/ChargingPile1.png';	
	import parking2 from '../../assets/image/home/ChargingPile2.png';	
	export default {
		name: "ChargingPile",
		// 数据
		data() {

			return {
				userId: '',
				city: '', //城市
				latlgt: '', //经纬度
				lat:'',//经度
				lgt:'',//纬度
				MAP: '', //地图实例
				allData: '', //所有数据
				yourPosition: {}, // 当前位置,经纬度表示      
				isShow:false,//是否显示
				parkingName:'',
				parkingAddr:'',
				newPoint:'',
				newLgt:'',
				newLat:'',
				distance:'',
				Time:0,
				OneNum:'',
				hitMarker:null,
			}
		},
		// 计算属性
		computed: {

		},
		// 创建（实例创建完成）
		created() {
			this.userId = getCookie('loginkey');
			this.city = sessionStorage.getItem('city'); //城市
			this.latlgt = sessionStorage.getItem('latlgt'); //经纬度			
			let arr_latlgt = this.latlgt.split(',');						
			this.lat = parseFloat(arr_latlgt[0]);//经度
			this.lgt = parseFloat(arr_latlgt[1]);//纬度		
		},
		// el被创建，并挂载到实例上
		mounted() {
			let that = this;
			// 生成地图实例
			that.MAP = new BMap.Map("container");			
			let point = new BMap.Point(this.lat, this.lgt); // 创建点坐标  
			that.MAP.enableScrollWheelZoom(); // 开启滚轮缩放	 						
			that.MAP.addControl(new BMap.OverviewMapControl()); // 添加缩略地图控件
			that.MAP.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图缩放级别 
			//获取定位
			that.getPosition();
			//获取停车场
			that.getParking();				
		},
		// 方法（实例中的方法）-----------
		methods: {			
			//定位
			getPosition(){
				let that = this;
    		 	let geolocation = new BMap.Geolocation();
				 geolocation.getCurrentPosition(function(r){							 		
				//自定义覆盖物
				var myIcon = new BMap.Icon(
	 			yourLocation//直接写相对路径不会显示，需要import
	 			,new BMap.Size(45,62)
		 		,{anchor: new BMap.Size(30,70)}//这个参数慢慢测
		 		);
				let mk = new BMap.Marker(r.point,{icon:myIcon});
				//let mk = new BMap.Marker(r.point);
				mk.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除
				that.MAP.addOverlay(mk);//将覆盖物添加到地图中
				that.MAP.panTo(r.point);//将地图的中心点更改为给定的点
				that.yourPosition.lng = r.point.lng;//经度
		        that.yourPosition.lat = r.point.lat;//纬度		        		        		        	       
		        //监听事件
		        mk.addEventListener("click",function(){
		        		//点击定位到中心
						   	that.MAP.panTo(new BMap.Point(r.point.lng,r.point.lat));						   	
						});
				});
			},
			//停车场
			getParking(){
				//圆形区域搜索
					let that = this;									
					var myIcon = new BMap.Icon(
		 			parking//直接写相对路径不会显示，需要import
		 			,new BMap.Size(54,72)
			 		,{anchor: new BMap.Size(30,70)}//这个参数慢慢测
			 		);
			 		
					var mPoint = new BMap.Point(this.lat,this.lgt); 	
					var circle = new BMap.Circle(mPoint,{icon:myIcon},1000,{fillColor:"", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
				    that.MAP.addOverlay(circle);
				    var local =  new BMap.LocalSearch(that.MAP, {				    	
				    	pageCapacity:20,//每页返回数据量，默认为10
				    	renderOptions: {
				    		//map: that.MAP,//当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上--此参数开始必须使用
				    		autoViewport: true//检索结束后是否自动调整地图视野
				    	}
				    });				 
				    let arr=['充电桩','附近10公里'];//搜索多个关键字	
				    local.searchNearby(arr,mPoint,5000);//1000表示附近1000米				    
				    local.disableFirstResultSelection();//禁用自动选择第一个检索结果		
				    
				    setTimeout(()=>that.myDefinite(local),1500);//延迟几秒才能显示数据				    
			},
			//自定义停车场icon即覆盖物
			myDefinite(objs){	
				let that = this;				
				let obj = objs.wf;	
				
				for(let i=0;i<obj.length;i++){						
					let oPoint = obj[i].point;
					let oLng = oPoint.lng;
					let oLat = oPoint.lat;	
					var myIcon = new BMap.Icon(
		 			parking//直接写相对路径不会显示，需要import
		 			,new BMap.Size(54,72)
			 		,{anchor: new BMap.Size(30,70)}//这个参数慢慢测
			 		);
			 		var mPoint = new BMap.Point(oLng,oLat);
			 		var markers = new BMap.Marker(mPoint,{icon: myIcon}); // 创建标注
					that.MAP.addOverlay(markers); // 将标注添加到地图中																								
					//单个点击事件
					markers.addEventListener("click",function(e){
						//that.MAP.removeOverlay(this);
						if(that.hitMarker!=null){
							that.MAP.removeOverlay(that.hitMarker);
						}
							that.Time++;		
							obj[i].count = that.Time; 
				   			that.isShow = true;
				   			that.parkingName = obj[i].title;
				   			that.parkingAddr = obj[i].address;	
				   			that.newLgt = obj[i].point.lng;
				   			that.newLat = obj[i].point.lat;
				   			let newPoint = that.newLgt+','+that.newLat;				   			
							let point1 = new BMap.Point(obj[i].point.lng,obj[i].point.lat);
							let point2 = new BMap.Point(that.lat,that.lgt);
				   			let dis = that.MAP.getDistance(point1,point2)/1000;				   						   			
				   			that.distance = dis.toFixed(2);				   			
				   			/*---点击放大图片start---*/				   							   			
							var myIcon2 = new BMap.Icon(
				 			parking2//直接写相对路径不会显示，需要import
				 			,new BMap.Size(90,124)
					 		,{anchor: new BMap.Size(52,128)}//这个参数慢慢测50,130
					 		);
					 		/*var myIcon3 = new BMap.Icon(
				 			parking//直接写相对路径不会显示，需要import
				 			,new BMap.Size(54,72)
					 		,{anchor: new BMap.Size(30,70)}//这个参数慢慢测30,70
					 		);*/
					 		var mPoint2 = new BMap.Point(oLng,oLat);					 		
					 		var markers2 = new BMap.Marker(mPoint2,{icon: myIcon2}); // 创建标注
					 		that.MAP.addOverlay(markers2); // 将标注添加到地图中					 		
					 		//console.log(i);
					 		//console.log(obj);
					 		that.hitMarker = markers2;
					 		console.log(that.hitMarker);
					 		/*---点击放大图片end---*/
					}); 
				}	
								
			},		
		},
		// 子组件
		components: {
			XHeader
		}
	}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
	.ChargingPile {
		height:100%;
		overflow-y:hidden;
	  	#container{
	  		width:100%;
	  		height:100%;  	  			
	  	}
	  	.parkingInfo{
	  		position:fixed;
	  		top:0.8rem;
  			width:7.5rem;
  			height:1.71rem;
  			background:#14b373;
  			z-index:99999;
  			display:flex;
  			flex-flow:column;
  			justify-content:flex-start;    			
  			.parkingInfo1{  				
  				padding-left:0.2rem;
  				padding-top:0.35rem;
  				p{
				width:100%;   				 								
  				align-self:center;
  				font-size:0.3rem;
  				text-align:left;
  				color:#fff;  				
  				}
  			}  					
  			.parkingInfo2{
  				display:flex;
  				margin-top:0.16rem;
  				width:6rem;
  				img{  				
	  				width:0.21rem;
	  				height:0.27rem;	  				
	  				margin-left:0.22rem;
	  				margin-right:0.1rem;
	  			}
	  			span{  				
	  				height:0.23rem;
	  				font-size:0.24rem;
	  				color:#fff;  
	  				text-align: left;				
	  			}
  			}
  			.parkingInfo3{
  				p{
  					width:100%;									
	  				font-size:0.24rem;
	  				color:#fff;
	  				text-align:right;	  				
	  				padding-right:0.14rem;  				
	  				span{
	  					font-size:0.48rem;	  					
	  				}
  				}
  			}  			 			  			  			
  		}
	  	.imgs{
	  		position:fixed;
	  		bottom:0.8rem;
	  		left:0.5rem;	  
	  		z-index:9999;		  		
	  		width:1rem;
  			height:0.72rem;
  			display:flex;
  			flex-flow:column;  			 		
	  		img{
	  			background:#fff;
	  			align-self:center;
	  			width:0.89rem;
	  			height:0.89rem;
	  			border-radius:50%;
	  			z-index:9999;
	  		}
	  		p{
	  			font-size:0.3rem;
	  			color:#000000;
	  			z-index:9999;
	  		}
	  	}
	}
</style>